<template>
  <div>
    <div class="piLiangDownLoad" v-if="fujianObjList.length != 0">
      <el-button type="primary" @click="downLoad" style="margin-left:20px;margin-top: 20px">批量下载</el-button>
    </div>
    <div style="font-size:24px" class="no-data" v-if="fujianObjList.length == 0">暂无数据</div>
    <div v-for="(v,i) in fujianObjList" :key="i" class="attachment">
      <div v-if="v.list.length != 0" class="fujianBox">
        <div class="bgFujian">
          <div class="fujianTitle">{{ i + 1 }}.{{ v.title }}</div>
          <div v-for="(item, index) in v.list" :key="index" class="fujianContent">
            <div class="fujianName">
              <i class="el-icon-document icon" />
              <el-tooltip class="item" effect="dark" :content="item.fileName" placement="top-start">
                <p class="fujianNamePdf">{{ item.fileName }}</p>
              </el-tooltip>
            </div>
            <div class="isHover">
              <span
                v-show="item.filePath.substring(item.filePath.indexOf('.')+1,item.filePath.length) == 'pdf'"
                @click="btn_see(item, index)"
              >查看</span>
              <span @click="btn_download(item)">下载</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      :close-on-click-modal="false"
      class="iframeBox"
      :title="title"
      :visible.sync="dialogVisible"
      width="50%"
    >
      <!-- <span v-show="loadIfram == 1" class="iframeLoad">
        加载中
        <div class="el-icon-loading"></div>
      </span>-->
      <iframe
        id="wode"
        v-if="fujianhz == 'pdf'"
        frameborder="0"
        name="showHere"
        style="width:100%;min-height:500px;"
        scrolling="auto"
        :src="$https + filePath"
      ></iframe>
      <iframe
        id="wode"
        v-if="fujianhz == 'dwg'"
        frameborder="0"
        name="showHere"
        style="width:100%;min-height:500px;"
        scrolling="auto"
        :src=" $httpsCad + '/?url=' + $https + filePath"
      ></iframe>
    </el-dialog>
  </div>
</template>

<script>
import { opinionReview } from '@/api/common'
export default {
  props: ['fujianObjList', 'code'],
  data() {
    return {
      filePath: '', //文件路径
      title: '',
      dialogVisible: false,
      loadIfram: 1,
      fujianhz: ''
    }
  },
  mounted() {},
  methods: {
    downLoad() {
      var a = document.createElement('a')
      a.setAttribute(
        'href',
        this.$https +
          '/renovation/attachmentData/batchDownload?projectId=' +
          localStorage.getItem('projectId') +
          '&key=' +
          this.code
      )
      a.setAttribute('target', '_blank')
      a.click()
    },
    btn_download(item) {
      var a = document.createElement('a')
      a.setAttribute(
        'href',
        this.$https + '/pc/file/download?id=' + item.fileId
      )
      a.click()
    },
    btn_see(item, index) {
      let that = this
      that.title = item.fileName
      that.filePath = item.filePath
      console.log(
        that.filePath.substring(
          that.filePath.indexOf('.') + 1,
          that.filePath.length
        )
      )
      that.fujianhz = that.filePath.substring(
        that.filePath.indexOf('.') + 1,
        that.filePath.length
      )
      that.dialogVisible = true
    },
    // btn_see(row) {
    //   let that=this
    //   this.title = row.fileName;
    //   this.filePath = row.filePath;
    //   this.dialogVisible = true;
    //   that.$nextTick(()=>{
    //     var iframe = document.getElementById("wode");
    //       iframe.onload = function(){
    //         that.loadIfram=2
    //     };
    //   })
    // },
    handleSizeChange(val) {},
    handleCurrentChange(val) {}
  }
}
</script>

<style lang="scss" scoped>
.form /deep/ .el-input__inner {
  width: 200px;
}
</style>

<style lang="scss" scoped>
.box {
  padding: 30px;
  .attachment {
    background: #fff;
    padding: 20px;
    .page_class {
      margin-top: 20px;
      text-align: center;
    }
  }
}
.iframeLoad {
  display: flex;
  font-size: 35px;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.fujianTitle {
  font-size: 16px;
  color: #333;
  font-weight: bold;
  padding: 10px 20px;
  border-radius: 5px;
}
.fujianContent {
  margin-left: 30px;
  background: #f5f8fa;
  width: 350px;
  border-radius: 6px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.fujianName {
  font-size: 14px;
  font-weight: bold;
  color: #606266;
  cursor: pointer;
  margin-right: 20px;
  display: flex;
  align-items: center;
  width: 210px;
}
.fujianName .fujianNamePdf {
  margin: 0px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.fujianName .icon {
  display: block;
  font-size: 20px;
  margin-right: 10px;
  color: #409eff;
}

.isHover {
  color: #409eff;
  font-size: 13px;
  width: 80px;
  display: none;
}
.isHover span {
  padding: 0px 3px;
  margin: 3px 5px 3px 0;
  cursor: pointer;
  display: block;
  float: left;
}
.fujianContent:hover .isHover {
  display: block;
}
.noData {
  text-align: center;
  font-weight: bold;
  font-size: 18px;
  color: #606266;
  padding: 20px;
}
</style>
